<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Layouts</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body>
<!-- PRO Framework Panel Begin -->
<!-- <div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><a href="" class="pro_logo"></a><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li class="current"><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="clear"></div></div></div><div class="bg_pro2"></div></div> -->
<!-- PRO Framework Panel End -->
<div class="bg-main">
<!--==============================header=================================-->
	<header>
		<div class="container_24">
			<div class="wrapper">
				<div class="grid_17">
					<h1><a href="index.html">Idealex</a></h1>
				</div>
				<div class="grid_7">
					<form id="search2">
						 <div class="fleft"><input type="text"></div>
						 <a onClick="document.getElementById('search2').submit()">search</a>
					</form>
				</div>
			</div>
		</div>
		<nav class="main-menu">
			<ul class="sf-menu">
				<li><a href="index.html"><em>about Us</em><strong></strong></a><ul>
						<li><a href="more.html">Who We Are</a></li>
						<li><a href="more.html">News</a></li>
						<li><a href="more.html">Products</a></li>
					</ul>
				</li>
				<li><a href="index-1.html"><em>services</em><strong></strong></a></li>
				<li><a href="index-2.html"><em>solutions</em><strong></strong></a></li>
				<li><a href="index-3.html"><em>Training</em><strong></strong></a></li>
				<li><a href="index-4.html"><em>support</em><strong></strong></a></li>
				<li><a href="index-5.html"><em>Clients</em><strong></strong></a></li>
				<li class="last"><a href="index-6.html"><em>contacts</em><strong></strong></a></li>
			</ul>
			<div class="clear"></div>
		</nav>
	</header>
<!--==============================section=================================-->
	<section class="padsection7">
	<div class="container_24">
<!-- Structure Begin -->
		<div class="wrapper">
			<div class="grid_24">
				<h1 class="title3">Layouts Page</h1>
				<h2 class="title3">Structure of an HTML document</h2>
				<div class="structuce">
					<div class="struct struct-header"><header> </header></div>
					<div class="struct struct-nav"><nav> </nav></div>
					<div class="wrapper">
						<div class="struct struct-aside fright"><aside> </aside></div>
						<div class="struct struct-section fleft"><section> </section></div>
					</div>
					<div class="struct struct-footer"><footer> </footer></div>
				</div>
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>The first step of creating any HTML document is formatting page structure. To create new website pages you can use blank.html file that is included into the purchased template package. </p>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Structure End -->
<!-- Structure 2 Begin -->
	<div class="wrapper"><div class="grid_24"><h2 class="title">Structure Configuration</h2></div></div>
	<div class="wrapper">
		<div class="grid_12">
			<h3>Page Layout</h3>
			<div class="structuce">
				<div class="struct-main">
					<div class="struct">Header</div>
					<div class="struct struct-content">Content</div>
					<div class="struct">Footer</div>
				</div>
			</div>
			<dl class="description-box">
				<dt><a class="description-dark">Description<span></span></a></dt>
				<dd>
					<div class="inner">
					<p>If the layout looks like a single sheet of paper on top of <body> and all content sections are wrapped by a single width-defining element, use the following code:</p>
					<p>HTML</p>
<pre class="htmlCode"><div id="main">
	<header>
		 <!-- Your Logo here -->
		<nav>
			<!-- Your Main Menu here -->
		</nav>
	</header>
	<section>
		<div class="container_24">
			<div class="wrapper">
				<!-- Your Columns here -->
			</div>
		</div>
	</section>
	<footer> <!-- Your Footer here --> </footer>
</div></pre>
					<p>CSS</p>
<pre class="cssCode">#main{ 
width:1000px; /* Your Main Block width */
margin:0 auto; 
background:#fff; /* Your Background Color */
}</pre>
					</div>
				</dd>
			</dl>
		</div>
		<div class="grid_12">
			<h3>Page Layout width full-width backgrounds</h3>
			<div class="structuce structuce2">
				<div class="struct"><div class="struct2">Header</div></div>
				<div class="struct struct3"><div class="struct2 struct2-content">Content</div></div>
				<div class="struct"><div class="struct2">Footer</div></div>
			</div>
			<dl class="description-box">
				<dt><a class="description-dark">Description<span></span></a></dt>
				<dd>
					<div class="inner">
					<p>If the layout is subdivided into several vertical aligned sections, covering the full width of the viewport and the content area is aligned or centered within these sections, use the following code:</p>
					<p>HTML</p>
<pre class="htmlCode"><header class="full-width-bg">
	<div class="header-box">
		<!-- Your Logo here -->
		<nav>
			<!-- Your Main Menu here -->
		</nav>
	</div>
</header>
<section class="full-width-bg">
	<div class="container_24">
		<div class="wrapper">
			<!-- Your Columns here -->
		</div>
	</div>
</section>
<footer class="full-width-bg">
	<div class="footer-box">
			<!-- Your Footer here -->
	</div>
</footer>
</pre>
						<p>CSS</p>
<pre class="cssCode">.full-width-bg{ 
width:100%; 
background:#ddd; /* Your Backgrounds Color */
}
.header-box{ 
width:960px; /* Your Header Block width */
margin:0 auto; 
}
.footer-box{ 
width:960px;  /* Your Footer Block width */
margin:0 auto; 
}</pre>
					</div>
				</dd>
			</dl>
		</div>
	</div>
<!-- Structure 2 End -->
<!-- Columns Begin -->
		<div class="wrapper"><div class="grid_24"><h2 class="title">Columns</h2></div></div>
		<div class="wrapper grid-row"><div class="grid_24"><div class="grid-box normaltip aligncenter" title="950px">grid_24</div></div></div>
		<div class="wrapper grid-row"><div class="grid_1"><div class="grid-box normaltip aligncenter" title="30px">1</div></div><div class="grid_23"><div class="grid-box normaltip aligncenter" title="910px">grid_23</div></div></div>
		<div class="wrapper grid-row"><div class="grid_2"><div class="grid-box normaltip aligncenter" title="70px">grid_2</div></div><div class="grid_22"><div class="grid-box normaltip aligncenter" title="870px">grid_22</div></div></div>
		<div class="wrapper grid-row"><div class="grid_3"><div class="grid-box normaltip aligncenter" title="110px">grid_3</div></div><div class="grid_21"><div class="grid-box normaltip aligncenter" title="830px">grid_21</div></div></div>
		<div class="wrapper grid-row"><div class="grid_4"><div class="grid-box normaltip aligncenter" title="150px">grid_4</div></div><div class="grid_20"><div class="grid-box normaltip aligncenter" title="790px">grid_20</div></div></div>
		<div class="wrapper grid-row"><div class="grid_5"><div class="grid-box normaltip aligncenter" title="190px">grid_5</div></div><div class="grid_19"><div class="grid-box normaltip aligncenter" title="750px">grid_19</div></div></div>
		<div class="wrapper grid-row"><div class="grid_6"><div class="grid-box normaltip aligncenter" title="230px">grid_6</div></div><div class="grid_18"><div class="grid-box normaltip aligncenter" title="710px">grid_18</div></div></div>
		<div class="wrapper grid-row"><div class="grid_7"><div class="grid-box normaltip aligncenter" title="270px">grid_7</div></div><div class="grid_17"><div class="grid-box normaltip aligncenter" title="670px">grid_17</div></div></div>
		<div class="wrapper grid-row"><div class="grid_8"><div class="grid-box normaltip aligncenter" title="310px">grid_8</div></div><div class="grid_16"><div class="grid-box normaltip aligncenter" title="630px">grid_16</div></div></div>
		<div class="wrapper grid-row"><div class="grid_9"><div class="grid-box normaltip aligncenter" title="350px">grid_9</div></div><div class="grid_15"><div class="grid-box normaltip aligncenter" title="590px">grid_15</div></div></div>
		<div class="wrapper grid-row"><div class="grid_10"><div class="grid-box normaltip aligncenter" title="390px">grid_10</div></div><div class="grid_14"><div class="grid-box normaltip aligncenter" title="550px">grid_14</div></div></div>
		<div class="wrapper grid-row"><div class="grid_11"><div class="grid-box normaltip aligncenter" title="430px">grid_11</div></div><div class="grid_13"><div class="grid-box normaltip aligncenter" title="510px">grid_13</div></div></div>
		<div class="wrapper grid-row"><div class="grid_12"><div class="grid-box normaltip aligncenter" title="470px">grid_12</div></div><div class="grid_12"><div class="grid-box normaltip aligncenter" title="470px">grid_12</div></div></div>
		<div class="wrapper grid-row"><div class="grid_13"><div class="grid-box normaltip aligncenter" title="510px">grid_13</div></div><div class="grid_11"><div class="grid-box normaltip aligncenter" title="430px">grid_11</div></div></div>
		<div class="wrapper grid-row"><div class="grid_14"><div class="grid-box normaltip aligncenter" title="550px">grid_14</div></div><div class="grid_10"><div class="grid-box normaltip aligncenter" title="390px">grid_10</div></div></div>
		<div class="wrapper grid-row"><div class="grid_15"><div class="grid-box normaltip aligncenter" title="590px">grid_15</div></div><div class="grid_9"><div class="grid-box normaltip aligncenter" title="350px">grid_9</div></div></div>
		<div class="wrapper grid-row"><div class="grid_16"><div class="grid-box normaltip aligncenter" title="630px">grid_16</div></div><div class="grid_8"><div class="grid-box normaltip aligncenter" title="310px">grid_8</div></div></div>
		<div class="wrapper grid-row"><div class="grid_17"><div class="grid-box normaltip aligncenter" title="670px">grid_17</div></div><div class="grid_7"><div class="grid-box normaltip aligncenter" title="270px">grid_7</div></div></div>
		<div class="wrapper grid-row"><div class="grid_18"><div class="grid-box normaltip aligncenter" title="710px">grid_18</div></div><div class="grid_6"><div class="grid-box normaltip aligncenter" title="230px">grid_6</div></div></div>
		<div class="wrapper grid-row"><div class="grid_19"><div class="grid-box normaltip aligncenter" title="750px">grid_19</div></div><div class="grid_5"><div class="grid-box normaltip aligncenter" title="190px">grid_5</div></div></div>
		<div class="wrapper grid-row"><div class="grid_20"><div class="grid-box normaltip aligncenter" title="790px">grid_20</div></div><div class="grid_4"><div class="grid-box normaltip aligncenter" title="150px">grid_4</div></div></div>
		<div class="wrapper grid-row"><div class="grid_21"><div class="grid-box normaltip aligncenter" title="830px">grid_21</div></div><div class="grid_3"><div class="grid-box normaltip aligncenter" title="110px">grid_3</div></div></div>
		<div class="wrapper grid-row"><div class="grid_22"><div class="grid-box normaltip aligncenter" title="870px">grid_22</div></div><div class="grid_2"><div class="grid-box normaltip aligncenter" title="70px">grid_2</div></div></div>
		<div class="wrapper grid-row"><div class="grid_23"><div class="grid-box normaltip aligncenter" title="910px">grid_23</div></div><div class="grid_1"><div class="grid-box normaltip aligncenter" title="30px">1</div></div></div>
<!-- Columns End -->
<!-- Layouts Begin -->
	<div class="wrapper"><div class="grid_24"><h2 class="title">Layouts</h2></div></div>
	</div>
	<div class="tabs tabs1">
		<div class="wrapper">
			<ul class="layouts-menu">
				<li class="layout1"><a href=""><span></span></a></li>
				<li class="layout2"><a href=""><span></span></a></li>
				<li class="layout3"><a href=""><span></span></a></li>
				<li class="layout4"><a href=""><span></span></a></li>
				<li class="layout5"><a href=""><span></span></a></li>
				<li class="layout6"><a href=""><span></span></a></li>
			</ul>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Full-width Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Full-width</h3></div></div>
		<div class="grid-row2"><div class="wrapper"><div class="grid_24 grid-box2 normaltip" title="950px">Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.</div></div></div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>The template is based on a grid system that uses 24 columns. In order to create the full-witdh column you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_24">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
                        <p>Lets examine the layout creation process, step by step:</p>
                        <ol>
                        <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                        <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                        <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
						</ol>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Full-width End -->
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Two Columns Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Two Columns</h3></div></div>
		<div class="grid-row2">
			<div class="wrapper">
				<div class="grid_12 grid-box2 normaltip" title="470px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.</div>
				<div class="grid_12 grid-box2 normaltip" title="470px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.</div>
			</div>
		</div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>In order to create two columns you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_12">
			<!-- insert content here -->
		</div>
		<div class="grid_12">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
						<p>Two Columns Layout creation:</p>
						<ol>
                <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
                </ol>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Two Columns End -->
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Three Columns Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Three Columns</h3></div></div>
		<div class="grid-row2">
			<div class="wrapper">
				<div class="grid_8 grid-box2 normaltip" title="310px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.</div>
				<div class="grid_8 grid-box2 normaltip" title="310px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.</div>
				<div class="grid_8 grid-box2 normaltip" title="310px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est.</div>
			</div>
		</div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>In order to create three columns you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_8">
			<!-- insert content here -->
		</div>
		<div class="grid_8">
			<!-- insert content here -->
		</div>
		<div class="grid_8">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
						<p>Three Columns Layout creation:</p>
						<ol>
                <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
                </ol> 
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Three Columns End -->
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Four Columns Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Four Columns</h3></div></div>
		<div class="grid-row2">
			<div class="wrapper">
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
			</div>
		</div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>In order to create four columns you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_6">
			<!-- insert content here -->
		</div>
		<div class="grid_6">
			<!-- insert content here -->
		</div>
		<div class="grid_6">
			<!-- insert content here -->
		</div>
		<div class="grid_6">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
						<p>Four Columns Layout creation:</p>
						<ol>
                <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
                </ol> 
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Four Columns End -->
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Left Sidebar Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Left Sidebar</h3></div></div>
		<div class="grid-row2">
			<div class="wrapper">
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
				<div class="grid_18 grid-box2 normaltip" title="710px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
			</div>
		</div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>In order to create layout with left sidebar you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_6">
			<!-- insert content here -->
		</div>
		<div class="grid_18">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
						<p>Layout with left sidebar creation:</p>
						<ol>
                <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
                </ol>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Left Sidebar End -->
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
<!-- Right Sidebar Begin -->
		<div class="wrapper"><div class="grid_24"><h3>Right Sidebar</h3></div></div>
		<div class="grid-row2">
			<div class="wrapper">
				<div class="grid_18 grid-box2 normaltip" title="710px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Nulla ullamcorper ultrices mi a pellentesque. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui, a sollicitudin dui sem et ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
				<div class="grid_6 grid-box2 normaltip" title="230px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem.</div>
			</div>
		</div>
		<div class="wrapper pad_description">
			<div class="grid_24">
				<dl class="description-box">
					<dt><a class="description-dark">Description<span></span></a></dt>
					<dd>
						<div class="inner">
						<p>In order to create layout with right sidebar you will need to insert the following code:</p>
<pre class="htmlCode"><div class="container_24">
	<div class="wrapper">
		<div class="grid_18">
			<!-- insert content here -->
		</div>
		<div class="grid_6">
			<!-- insert content here -->
		</div>
	</div>
</div></pre>
						<p>Layout with right sidebar creation:</p>
						<ol>
                <li>Create a <strong><div></strong> with the <strong>"wrapper"</strong> class (<strong><div class="wrapper"></strong>). This <strong><div></strong> is a container for our columns so using it is a must.</li>
                <li>Next you need to create the desired number of columns and add the <strong>"grid"</strong> class to them.</li>
                <li>Now the most important step. You need to add <strong>"grid_x"</strong> class to each of the columns, where <strong>x</strong> - is the column width index. <strong>Total index of all the columns should be equal to 24</strong> and should not be bigger than this value.</li>
                </ol>
						</div>
					</dd>
				</dl>
			</div>
		</div>
<!-- Right Sidebar End -->
			</div>
		</div>
	</div>
<!-- Layouts End -->
	<div class="container_24"><div class="wrapper"><div class="grid_24"><h3 class="title">Images</h3></div></div></div>
<!-- Images Begin -->
	<div class="tabs tabs2">
		<div class="wrapper">
			<ul class="layouts-menu">
				<li class="layout7"><a href=""><span></span></a></li>
				<li class="layout8"><a href=""><span></span></a></li>
			</ul>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_8">
						<h3>Floating Left</h3>
						<div class="wrapper">
							<img src="images/stock_images/120x120_2.jpg" alt="" class="image_left">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.</p>
						</div>
					</div>
					<div class="grid_8">
						<h3>Floating Left 2</h3>
						<div class="wrapper">
							<img src="images/stock_images/70x70_3.jpg" alt="" class="image_left">
							<p class="extra-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.</p>
						</div>
					</div>
					<div class="grid_8">
						<h3>Floating Right</h3>
						<div class="wrapper">
							<img src="images/stock_images/120x120_4.jpg" alt="" class="image_right">
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.</p>
						</div>
					</div>
				</div>
				<div class="wrapper pad_description">
					<div class="grid_24">
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
								<p class="descr_title"><strong>Floating Left</strong></p>
								<p>In order to create an image block with the text wrapping it on the right, add class &quot;image_left&quot; to the image.</p>
<pre class="htmlCode"><div class="wrapper">
	<div class="image_left">
		<img src="YourImage.jpg" alt="">
	</div>
	<p> <!-- insert text here --> </p>
</div></pre>
								<p class="descr_title"><strong>Floating Left 2</strong></p>
								<p>In order to create left-aligned image block and right-aligned text block add class "image_left" to the image and class "extra-wrap&quot; to the text block.</p>
<pre class="htmlCode"><div class="wrapper">
	<div class="image_left">
		<img src="YourImage.jpg" alt="">
	</div>
	<p class="extra-wrap"> <!-- insert text here --> </p>
</div></pre>
								<p class="descr_title"><strong>Floating Right</strong></p>
								<p>In order to create an image block with the text wrapping it on the left, add class &quot;image_right&quot; to the image.</p>
<pre class="htmlCode"><div class="wrapper">
	<div class="image_right">
		<img src="YourImage.jpg" alt="">
	</div>
	<p> <!-- insert text here --> </p>
</div></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="container_24">
				<div class="wrapper">
					<div class="grid_6">
						<h3>Image without style</h3>
						<span><img src="images/stock_images/200x150_1.jpg" alt=""></span>
					</div>
					<div class="grid_6">
						<h3>Image Style 1</h3>
						<span class="image_style1 image_style1_marg"><img src="images/stock_images/200x150_2.jpg" alt=""></span>
					</div>
					<div class="grid_6">
						<h3>Image Style 2</h3>
						<span class="image_style2"><img src="images/stock_images/200x150_3.jpg" alt=""></span>
					</div>
					<div class="grid_6">
						<h3>Image Style 3</h3>
						<span class="image_style3 image_style1_marg"><img src="images/stock_images/200x150_4.jpg" alt=""></span>
					</div>
				</div>
				<div class="wrapper pad_description">
					<div class="grid_24">
						<dl class="description-box">
							<dt><a class="description-dark">Description<span></span></a></dt>
							<dd>
								<div class="inner">
								<p class="descr_title">Image without style</p>
								<p>To create simple image block without any styles use the &quot;img&quot; tag. Using the &quot;src&quot; image attribute input the root to the image file.</p>
<pre class="htmlCode"><img src="images/YourImage.jpg" alt=""></pre>
								<p class="descr_title">Image Style 1</p>
								<p>Create &quot;span&quot; tag with class "image_style1" and insert &quot;img&quot; tag with &quot;src&quot; attribute and root to the image file. </p>
<pre class="htmlCode"><span class="image_style1"> 
	<img src="images/YourImage.jpg" alt=""> 
</span></pre>
								<p class="descr_title">Image Style 2</p>
								<p>Create &quot;span&quot; tag with class "image_style2" and insert &quot;img&quot; tag with &quot;src&quot; attribute and root to the image file. </p>
<pre class="htmlCode"><span class="image_style2"> 
	<img src="images/YourImage.jpg" alt=""> 
</span></pre>
								<p class="descr_title">Image Style 3</p>
								<p>Create &quot;span&quot; tag with class "image_style3" and insert &quot;img&quot; tag with &quot;src&quot; attribute and root to the image file. </p>
<pre class="htmlCode"><span class="image_style3"> 
	<img src="images/YourImage.jpg" alt=""> 
</span></pre>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
<!-- Images End -->
	</div>
</section>	
</div>
<!--==============================footer=================================-->
<footer>
	<div class=" container_24">
		<div class="wrapper">
			<div class="grid_6 suffix_2">
				<h1 class="footer-logo"><a href="index.html">idealex</a></h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ultricies odio magna.</p>
				<p class="color1 privacy">&copy; 2012 <span>|</span>  <a href="index-7.html">Privacy Policy</a> <!-- {%FOOTER_LINK} --></p>
			</div>
			<div class="grid_7 suffix_2">
				<h4>Related Links</h4>
				<div class="wrapper">
					<div class="grid_4 alpha">
						<ul class="footer-list">
							<li><a href="more.html">About Us</a></li>
							<li><a href="more.html">Testimonials</a></li>
							<li><a href="more.html">Our Staff</a></li>
							<li><a href="more.html">Events &amp; Press</a></li>
							<li><a href="more.html">Contact Us</a></li>
						</ul>
					</div>
					<div class="grid_3 omega">
						<ul class="footer-list">
							<li><a href="more.html">Sign Up</a></li>
							<li><a href="more.html">Forums</a></li>
							<li><a href="more.html">Affiliate Program</a></li>
							<li><a href="more.html">FAQ</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="grid_7">
				<h4>Follow Us</h4>
				<ul class="tooltips">
					<li><a href="more.html"><img src="images/icon1.png" alt=""><span>RSS</span></a></li>
					<li><a href="more.html"><img src="images/icon3.png" alt=""><span>Facebook</span></a></li>
					<li><a href="more.html"><img src="images/icon2.png" alt=""><span>Twitter</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</footer>
</body>
</html>